<template>
	<view class="draw">
		<view class="winning" v-if="dataList.length>0">

			<text class="iconfont icon-xiaolaba"></text>
			<swiper vertical autoplay circular interval="2000" style="width:100%;height:36rpx">
				<swiper-item class="list" v-for="(d,index) in dataList" :key="index">{{d}}</swiper-item>

			</swiper>
		</view>
		<view class="draw_banner">
			<image @click="goRecord" :src="domain+draw_banner"></image>
			<button @click="drawRun">点击抽奖</button>
			<view class="residue">剩余抽奖次数:<text>{{user_num}}次</text></view>
		</view>

		<view class="winning_record">
			<view class="tit">中奖记录</view>
			<view class="con">
				<!-- <template v-if="list_code.length>0">
					<view class="list" v-for="(item,index) in list_code" :key="index">

						<view class="mid">

							<text>{{item.task.name}}</text>
							<text>核销码:{{item.code}}</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="right">
							<button @click="goHxquery">点击提现</button>
						</view>
					</view>
				</template> -->
				<view class="list" v-if="Object.keys(drawitem).length > 0">

					<view class="mid">

						<text>核销码:{{drawitem.code}}</text>
					</view>
				</view>

				<view class="no_record" v-else>
					无中奖记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["tastId"],
		data() {
			return {
				dataList: "",
				type: "",
				advert: "",
				index: 0,
				drawitem: {},
				user_num: 0,
				domain: uni.imgPath,
				draw_banner: "/upload/turnbg/draw_banner.png",
				list_code: []
			}
		},


		mounted() {

			this.init();
		},
		methods: {
			init() {
				this.getNum();
				this.drawMsgList();
				this.getCodeList();
				this.drawitem = this.$store.state.drawitem;
			},
			getCodeList() {
				console.log("getCodeList")

				uni.$http.post('/wxuser/public/drawCodeList', {
					id: this.tastId,
					num: 3,
					page: 1
				}).then((res) => {
					if (res.data.data.list.length) {
						this.list_code.push(...res.data.data.list);
					}


				})
			},
			goHxquery() {
				wx.setClipboardData({
					data: this.code,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				setTimeout(() => {
					uni.navigateTo({
						url: "/packages/hxquery/hxquery"
					})
				}, 1500)

			},
			goRecord() {
				uni.navigateTo({
					url: "/pagesTask/eventWinningRecord/index"
				})
			},
			getNum() {
				uni.$http.post('/wxuser/index/getNum', {
					id: this.tastId
				}).then(res => {
					var data = res.data.data;
					this.user_num = data.user_num;

				})
			},
			drawMsgList() { //中奖滚动
				uni.$http.post('/wxuser/draw/drawMsgList', {
					page: 1,
					num: 5
				}).then(res => {
					this.dataList = res.data.data;
				})
			},
			drawRun() {
				uni.$http.post('/wxuser/draw/run', {
					id: this.tastId
				}).then(res => {
					this.getNum();
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: "error",
							duration: 2000
						})
						return
					}
					var data = res.data.data;
					console.log(data)
					if (data.type) {
						this.type = data.type
						this.advert = data.advert
					} else {
						if (data.list) {
							if (data.list.code) {
								this.type = 5
								this.code = data.list.code;
								var prize = {
									type: 1,
									code: data.list.code
								}
								uni.$store.state.prize = prize
							} else {
								this.type = 1 //中奖了
								if (data.list.level || data.list.level == 0) {
									this.index = data.list.level
								} else {
									this.index = this.prizes.length - 1
								}
							}
							this.drawitem = data.list;
							this.getCodeList();
							this.drawMsgList();
							this.$store.state.drawitem = data.list;
							uni.showToast({
								title: '恭喜你中奖了',
								icon: "success",
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateTo({
									url: "/pagesTask/eventWinningRecord/index"
								})
							}, 2000)
						} else {
							this.type = 2
						}
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draw {
		.winning {
			display: flex;
			font-size: 24rpx;
			align-items: center;
			margin: 0 10rpx 20rpx 40rpx;

			text {
				margin-right: 12rpx;
				color: #666;
			}

		}

		.draw_banner {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;

			image {
				width: 710rpx;
				height: 220rpx;
				margin: 0 auto;
			}

			button {
				width: 193rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: linear-gradient(180deg, #356AFA 0%, #34B8FD 100%);
				border-radius: 8rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				margin: 30rpx auto 15rpx auto;
			}

			.residue {
				margin-bottom: 40rpx;
				font-size: 24rpx;
				text-align: center;
				color: #868686;

				text {
					margin-left: 20rpx;
					color: #000;
					font-weight: bold;
				}
			}
		}

		.winning_record {
			padding: 20rpx 20rpx 0 20rpx;
			background-color: #fff;

			.tit {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DDD;
				font-weight: bold;
				font-size: 28rpx;
			}

			.con {
				padding: 20rpx 0;

				.no_record {
					color: #666;
					font-size: 24rpx;
					line-height: 50rpx;
					text-align: center;
				}

				.list {
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					.left {
						image {
							width: 117rpx;
							height: 91rpx;
						}
					}

					.mid {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
						color: #868686;
						margin-left: 20rpx;
						flex: 1;

						text {
							margin: 0 10rpx;
						}
					}

					.right {
						button {
							width: 123rpx;
							height: 52rpx;
							line-height: 52rpx;
							background: linear-gradient(180deg, #356AFA 0%, #34B8FD 100%);
							border-radius: 8rpx;
							font-size: 24rpx;
							color: #fff;
							padding: 0;
							text-align: center;
							margin-top: 20rpx;
						}
					}
				}

			}
		}
	}
</style>